<template>
  <el-descriptions :title="title" :column="column" border>
    <el-descriptions-item
      v-for="item in list"
      :key="item.prop"
      :span="item.span"
    >
      <template #label> {{ item.label }} </template>
      <slot :name="item.prop" :rows="row">
        <template v-if="item.formatter">
          {{ item.formatter(item.value || row[item.prop]) }}
        </template>
        <template v-else>
          {{ item.value || row[item.prop] }}
        </template>
      </slot>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts">
import { defineProps } from "vue";

export default {
  name: "TableDetail",
  props: {
    data: {
      type: Object,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const { row, title, column = 2, list } = props.data;
    return { row, title, column, list };
  },
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>
